<template>
  <div class="mypermiss">
    <el-card class="">
      <!-- 按钮的位置 -->
      <el-row>
        <el-col style="text-align:right">
          <el-button type="primary" size="mini" @click="openAdd(1, '0')"
            ><i class="el-icon-edit"></i>添加菜单</el-button
          >
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        row-key="id"
        class="mytable"
      >
        <el-table-column
          label="菜单名称"
          width="300"
          prop="name"
        ></el-table-column>
        <el-table-column
          label="权限标识"
          width="300"
          prop="code"
        ></el-table-column>
        <el-table-column label="描述" prop="description"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button
              @click="openAdd(2, row.id)"
              type="text"
              v-if="row.type == 1"
              >添加权限点</el-button
            >
            <el-button type="text">查看api权限</el-button>
            <el-button type="text" @click="toDialog(row.id)">查看</el-button>
            <el-button type="text" @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加权限和查看权限所需的弹窗 -->
    <mypanel
      @updateData="getAllList"
      :showDialog.sync="showDialog"
      ref="mypanel"
    ></mypanel>
  </div>
</template>

<script>
import { getAllPerApi, delPerApi } from '@/api/permission'
export default {
  data () {
    return {
      //表格的数据源
      tableData: [],
      //控制权限和查看权限的弹窗的显示与隐藏
      showDialog: false
    }
  },
  methods: {
    //点击添加权限点按钮
    openAdd (type, pid) {
      // 调用子组件中的方法：setprop 给 type & pid 赋值
      this.$refs.mypanel.setprop(type, pid)
      //打开新增面板
      this.showDialog = true
    },
    //点击查看按钮显示弹窗
    toDialog (id) {
      this.showDialog = true
      //根据id得到权限数据
      //因为当前页面是父页面，要调用自组件中的方法，所以需要先在组件中定义 ref值
      this.$refs.mypanel.getDetailList(id)
    },
    //获取所有的权限列表
    async getAllList () {
      try {
        const res = await getAllPerApi()
        //  console.log(res);
        this.tableData = this.trunData(res.data, '0')
      } catch {
        console.log('出错啦')
      }
    },
    //将并列数据转换成树状结构
    trunData (arr, pid) {
      const newArr = []
      arr.forEach(item => {
        if (item.pid === pid) {
          const children = this.trunData(arr, item.id)
          if (children.length > 0) {
            item.children = children
          }
          newArr.push(item)
        }
      })
      return newArr
    },
    //点击删除按钮的操作
    async del (id) {
      try {
        //询问是否需要删除
        await this.$confirm('确定需要删除吗', '温馨提示')
        //提交数据
        await delPerApi(id)
        //提示删除成功
        this.$message.success('删除成功')
        //更新数据
        this.getAllList()
      } catch {
        console.log('出错啦')
      }
    }
  },
  created () {
    this.getAllList()
  },
  components: {
    mypanel: () => import('@/views/permission/panel/index.vue')
  }
}
</script>

<style lang="scss" scoped>
.mypermiss {
  margin: 30px;
  .mytable {
    margin-top: 60px;
  }
}
</style>
